<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		body{
			padding: 0;
			margin: 0;
		}
		canvas{
			border: 1px solid;
			display: block;
			
			background: url(body.gif);
			background-size: 30%;
		}
	</style>
	<body>
		<canvas id="canvas" width="500" height="500"></canvas>
	</body>
	
	<script type="text/javascript">
		var bg=new Image();
		bg.src = 'body.gif';
		var height=window.innerHeight-2;
		var width=window.innerWidth-2;
		function draw(){
			var c=document.getElementById("canvas");
			c.width=width;
			c.height=height;
			var ctx=c.getContext("2d");
			var zhoux=width/2;
			var zhouy=height/2;
			// ctx.globalCompositeOperation = 'destination-over';
			ctx.clearRect(0,0,width,height); // clear canvas
			ctx.save();
	
			// 地球
			ctx.beginPath();			
			ctx.globalCompositeOperation = 'source-over';
			ctx.translate(zhoux,zhouy);
			var gr1 = ctx.createLinearGradient(50,50,90,90);
			//添加颜色端点
			gr1.addColorStop(0,'#3f56ce');
			gr1.addColorStop(1,'#060d31'); 
			var time = new Date();
			ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
			ctx.arc(0,150,30,0,360*Math.PI/180);	
			ctx.fillStyle=gr1;		
			ctx.fill();			
			
			// 地球阴影
			ctx.beginPath();
			ctx.globalCompositeOperation = 'destination-over';
			ctx.rect(-30,175,60,50);
			ctx.fillStyle="rgba(0,0,0,0.7)";	
			ctx.fill();
			
			// 月亮
			ctx.beginPath();	
			ctx.globalCompositeOperation = 'destination-over';
			ctx.translate(0,150);
			var time = new Date();
			ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
			ctx.arc(0,60,10,0,360*Math.PI/180);	
			ctx.fillStyle="#fff";		
			ctx.fill();
			
			// 地球轨道
			ctx.beginPath();
			ctx.globalCompositeOperation = 'destination-over';
			ctx.arc(0,0,60,0,360*Math.PI/180);
			ctx.strokeStyle="gray";
			ctx.stroke();
			ctx.restore();
			
			// 太阳
			ctx.beginPath();
			var gr = ctx.createRadialGradient(zhoux,zhouy,30,zhoux,zhouy,10);
			//添加颜色端点
			gr.addColorStop(0,'yellow');
			gr.addColorStop(1,'red');      
			//应用fillStyle生成渐变
			ctx.fillStyle = gr;
			ctx.arc(zhoux,zhouy,50,0,360*Math.PI/180);
			ctx.fillStyle=gr;
			ctx.fill();
			
			// 太阳轨道
			ctx.beginPath();	
			ctx.globalCompositeOperation = 'destination-over';
			ctx.arc(zhoux,zhouy,150,0,360*Math.PI/180);
			ctx.strokeStyle="gray";
			ctx.stroke();
			// ctx.drawImage(bg,0,0,width,height);
			window.requestAnimationFrame(draw);
		}
		window.requestAnimationFrame(draw);
	</script>
</html>
